<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    <script th:src="@{/layui/jquery-3.6.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/layui/css/adminLogin.css}">
</head>
<body style="background-color:#6196BB">
<div class="wrap">
    <!--  <img th:src="@{/img/1.png}" class="imgStyle">-->
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <h2 style="margin-top: 15px">点点餐APP后台管理系统</h2>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username"
                           placeholder="输入用户名">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password"
                           placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="card"
                           placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput" type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitDiv" style="margin-left: 90px">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录">
                    <input id="loginBtn1" type="reset" class="submit layui-btn layui-btn-primary" value="重置">
<!--                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                </div>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
<script type="text/javascript">
    layui.use(['layer'], function () {
        var layer = layui.layer;
    })
    $(function () {
        // 页面初始化生成验证码
        window.onload = createCode('#loginCode');
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
    });

    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        for (var i = 0; i < codeLength; i++) {
            // 随机数索引
            var index = Math.floor(Math.random() * 36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }

    // 校验验证码、用户名、密码
    function validateCode(inputID, codeID) {
        var inputCode = $(inputID).val().toUpperCase();
        var cardCode = $(codeID).val();
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length <= 0) {
            // layer.alert("用户名不能为空");
            layer.msg('用户名不能为空！', {
                icon: 2,
                time: 1000
            });
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length <= 0) {
            // layer.alert("密码不能为空");
            layer.msg('密码不能为空！', {
                icon: 2,
                time: 1000
            });
            return false;
        }
        if (inputCode.length <= 0) {
            // layer.alert("验证码不能为空");
            layer.msg('验证码不能为空', {
                icon: 2,
                time: 1000
            });
            return false;
        }
        if (inputCode != cardCode) {
            // layer.alert("请输入正确验证码");
            layer.msg('请输入正确验证码', {
                icon: 2,
                time: 1000
            });
            return false;
        }
        return true;
    }

    // 登录流程
    function login() {
        if (!validateCode('#loginCard', '#loginCode')) {
            //阻断提示
        } else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var params = {};
            params.adminName = loginUsername;
            params.adminPassword = loginPassword;
            var loginLoadIndex = layer.load(2);
            $('#loginBtn').val("正在登录...");
            $('#loginUsername').val("");
            $('#loginPassword').val("");
            $.ajax({
                    url: "http://localhost:8080/admin/login",
                    type: "post",
                    data: {
                        admin1: JSON.stringify(params)
                    },
                    traditional: true,
                    success: function (res) {
                        layer.close(loginLoadIndex);
                        if (res) {
                            layer.msg('登录成功', {
                                icon: 1,
                                time: 1500
                            });
                            setTimeout('window.location.href = "index.html"',1500);
                        }else {
                            layer.msg('登录失败，账号或密码错误！', {
                                icon: 2,
                                time: 1500
                            });
                        }
                        $('#loginBtn').val("登录");
                        window.onload = createCode('#loginCode');
                        cardCode = $(codeID).val();
                    },
                }
            );
        }
    }
</script>
</body>
</html>